<template>
  <div>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input
              placeholder="请输入内容"
              clearable
              :suffix-icon="Search"
          >
          </el-input>
        </el-col>
        <el-col :span="1.5">
          <el-button type="success">查询</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="collect">立即采集</el-button>
        </el-col>
      </el-row>

      <el-row :gutter="20" v-for="(item, index) in state.question_list" :key="index" class="row-wrapper">
        <el-col :span="4">
          <div>{{item.votes}} votes</div>
          <div>{{item.answers}} answers</div>
          <div>{{item.viewed}} views</div>
        </el-col>
        <el-col :span="16">
          <div>
            <!-- 跳转方式1 -->
            <!-- <router-link :to="{name:'/detail', params:item.id}">{{item.title}}</router-link> -->
            <!-- 跳转方式2 -->
            <!-- <p id="q_title" :href="item.url" @click="goto_detail(item.id)">{{item.title}}</p> -->
            <div id="q_title" @click="goto_detail(item.id)">{{item.title}}</div>
          </div>
          <br>
          <div>{{item.tags}}</div>
        </el-col>
      </el-row>

      <el-pagination
          @current-change="handleCurrentChange"
          :current-page="state.queryObj.page_num"
          layout="prev, pager, next"
          :total="state.total"
          class="mt-4"
          small
          background
      ></el-pagination>
    </el-card>
  </div>
</template>

<script setup>
import {reactive, onMounted} from 'vue';
import {useRouter} from 'vue-router';
import {Search} from '@element-plus/icons-vue';
import {getQuestionInfo, questionSpider} from "../service/question";
import {ElMessage} from "element-plus";

const state = reactive({
  queryObj: {
    query: "",
    page_num: 1,
    page_size: 10
  }
})

onMounted(() => {
  getQuestionData()
})

const getQuestionData = async () => {
  const res = await getQuestionInfo(state.queryObj)
  state.question_list = res.data
  state.total = res.count
}

const collect = () => {
  questionSpider()
  ElMessage.success("启动成功")
}
const handleCurrentChange = (page) => {
  state.queryObj.page_num = page;
  getQuestionData()
}
const route = useRouter()

const goto_detail = (id) => {
  console.log(id);
  
  route.push({path:'/detail',query:{ id}})
  

}

</script>

<style scoped lang="less">
.el-table {
  margin-top: 15px;
  font-size: 12px;
}

.el-pagination {
  padding-top: 15px;
}
.el-row{
  margin-bottom: 15px;
}
#q_title {
  cursor: pointer;
  color: hsl(209deg 100% 38%);
}
.row-wrapper{
  margin: 10px 0px;
  border: 1px solid #f1f2f6;
  border-radius: 5px;
}
</style>